<template>
  <div>
    <maintainDetail
      v-if="detailVisible"
      @changeDetailVisible="changeDetailVisible"
      :effPlanDetail="effDetail"
    >
    </maintainDetail>

    <addMaintainPlan
      v-else-if="addVisible"
      @addMaintain="addMaintain"
      :mainDevice="deviceList"
      :factoryList="companyList"
      :planPositionList="positionList"
      :planClassifyList="classifyList"
      @handlePlanOk="handlePlanOk"
      :editId="id"
    >
    </addMaintainPlan>

    <div class="project zy-content" v-show="!detailVisible && !addVisible">
      <Tabs
        class="tabs-layout mb16"
        @on-click="tabsClick"
        v-model="status"
        :animated="false"
      >
        <TabPane :label="$t('maintenance.ValidPlan')"> </TabPane>
        <TabPane :label="$t('maintenance.InvalidPlan')"> </TabPane>
      </Tabs>
      <efficacious
        ref="efficacious"
        :planIds="ids"
        :status="status"
        @addMaintain="addMaintain"
        @changeDetailVisible="changeDetailVisible"
        :device="deviceList"
        :effPlanList="effList"
        :effPlanTotal="effTotal"
      >
      </efficacious>

    </div>
  </div>
</template>

<script>
import efficacious from "./maintain/efficacious.vue";
import addMaintainPlan from "./maintain/addMaintainPlan.vue";
import maintainDetail from "./maintain/maintainDetail.vue";

export default {
  name: "maintainPlanPage",
  components: {
    efficacious,
    addMaintainPlan,
    maintainDetail,
  },
  data() {
    return {
      id: "",
      ids: [],
      status: 0,
      effTotal: 0,
      cycleList: [
        { name: "全部", key: "" },
        { name: "小时", key: "8" },
        { name: "班次", key: "7" },
        { name: "日", key: "1" },
        { name: "周", key: "2" },
        { name: "月", key: "3" },
        { name: "季度", key: "4" },
        { name: "半年", key: "5" },
        { name: "年", key: "6" },
      ],
      invalidTotal: 0,
      addVisible: false,
      detailVisible: false,
      effDetail: {},
      checkBtnPermission: {},
      deviceList: [],
      companyList: [],
      positionList: [],
      classifyList: [],
      effList: [],
      invalidList: [],
    };
  },
  created() {
    // this.getDeviceList()
    this.getCompanyList();
    // this.getPositionList()
    // this.getClassifyList()
  },
  mounted() {
    this.searchList();
  },
  methods: {
    /**************基础数据**********************/
    getDeviceList() {
      this.axios({
        method: "get",
        url: "/dms/dmsCategory/getSelectList",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data.map((item) => {
            return {
              ...item,
              value: item.value.toString(),
            };
          });
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //公司列表
    getCompanyList() {
      this.axios({
        method: "get",
        url: "/basic/company/getCompanyListByUser",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getPositionList() {
      this.axios({
        method: "get",
        url: "/dms/dcmMaintainPosition/getSelectList",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.positionList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getClassifyList() {
      this.axios({
        method: "get",
        url: "/dms/dcmMaintainClassify/getSelectList",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.classifyList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    tabsClick(name) {
      this.status = name;
      this.ids = [];
      // this.searchList();
    },
    searchList() {
        this.$refs.efficacious.searchList();
    },
    handlePlanOk() {
      this.addVisible = false;
      this.$refs.efficacious.searchList();

      // if (this.status == 0) {
      //   this.$refs.efficacious.searchList();
      // } else {
      //   this.$refs.invalid.searchList();
      // }
    },
    addMaintain(flag, record) {
      let obj = record ? record : {};
      this.addVisible = flag;
      if (obj.id) {
        this.id = record.id;
      } else {
        this.id = "";
      }
    },
    changeDetailVisible(flag, id) {
      this.detailVisible = flag;
      this.getEffDetail(id);
      if (!flag) {
        if (this.status == 0) {
          this.$refs.efficacious.searchList();
        } else {
          this.$refs.invalid.searchList();
        }
      }
    },
    getEffDetail(id) {
      this.axios({
        method: "get",
        url: "/dms/devSpotCheckPlan/getDevSpotCheckPlanById",
        params: {
          id,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.effDetail = res.data;
          const obj = this.cycleList.find(
            (val) => val.key == this.effDetail.triggerCycle
          );
          if (obj) {
            this.effDetail.triggerCycleText = res.data.intervalRate + obj.name;
          }
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.project {

  .title {

    .icon {
      display: flex;

      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;

        i {
          font-size: 36px;
        }
      }
    }
  }
  .ivu-tabs-tab {
    font-size: 18px;
  }
}
</style>
